<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:cc="http://java.sun.com/jsf/composite">
    
    <f:view locale="#{bundle.locale}">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/lightbox.css" rel="stylesheet" type="text/css" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/JavaScript" src="./resources/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $pubprice = 0;
       
                      
            function ButtonCancel(){
                $('#PanelConnexion').fadeOut('fast');
                $('#fade').remove();
            }
            function keyup(){     
                var myPassword = $('#phone').value;
                //alert(myPassword);
                console.log(myPassword);
            }
            function backfade(){
                $('#PanelConnexion').fadeOut('fast');
                $('#fade').remove();
            }
            function AddToCart($id,$title,$pic,$type,$price){
                $pubprice=$price;
                document.getElementById("priceitem").innerHTML = $price+" €";
                document.getElementById("NewItem:qteitem").value = 1;
                document.getElementById("qteitemfield").value = 1;
                document.getElementById("imgadd").src = $pic;
                document.getElementById("NewItem:iditem").value = $id;
                document.getElementById("titelitem").innerHTML = $title;
                if($type == '1')
                    {
                        document.getElementById("imgadd").className = "imgAlbum";
                    }
                else
                    {
                         document.getElementById("imgadd").className = "imgFilm"; 
                    }
              
               
            }    
            function RemoveFromCart(){
                alert("Element supprimé du panier");
            }
            function command(){
                alert("Panier commandé. Merci de votre achat");
            }
             
            

            $(document).ready(function () {
                $('a').popover();
                $('i').tooltip();
                $('#Connexion').click(function(){
                    $('#PanelConnexion').fadeIn('slow');
                    //Effet fade-in du fond opaque
                    $('body').append('<div onclick="backfade()" id="fade"></div>'); //Ajout du fond opaque noir
                });
                $('#ConnexionPanel').click(function(){
                    $('#PanelConnexion').fadeIn('slow');
                    //Effet fade-in du fond opaque
                    $('body').append('<div onclick="backfade()" id="fade"></div>'); //Ajout du fond opaque noir
                });
                 $('#ConnexionCart').click(function(){
                    $('#PanelConnexion').fadeIn('slow');
                    //Effet fade-in du fond opaque
                    $('body').append('<div onclick="backfade()" id="fade"></div>'); //Ajout du fond opaque noir
                });
            
                 $('#qteitemfield').keyup(function(){
      
                 $qte = $('#qteitemfield').val();
                 var intRegex = /^\d+$/;
                  if(intRegex.test($qte)) {
                      //<![CDATA[
                      if ($qte == 0)
                      // ]]>
                      {
                              document.getElementById('NewItem:subOrder').disabled = true;
                          }
                          else
                              {
                                document.getElementById('NewItem:subOrder').disabled = false;
                                document.getElementById('NewItem:qteitem').value = $qte;
                              }
                    }
                  else
                      {
                          document.getElementById('NewItem:subOrder').disabled = true;
                      }
                 
                    
                });
                });
               //document.ready
       
        </script>
        <title>Apppstore</title>
    </h:head>

    <h:body>
        <f:loadBundle basename="resources.lang" var="msg" />
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <h:link class="brand" value="Apppstore" outcome="index.xhtml"></h:link>
                  <div class="nav-collapse collapse">         
                    <ul class="nav pull-right">
                        <li>
                            <h:form id="Drap_fr">
                                <h:commandLink id="FR" action="#{bundle.setToFrench()}"><h:graphicImage title="French" value="resources/img/Fr.png"></h:graphicImage></h:commandLink>
                            </h:form>
                        </li>
                        <li>
                            <h:form id="Drap_en">
                                <h:commandLink id="EN" action="#{bundle.setToEnglish()}"><h:graphicImage title="English" value="resources/img/En.jpg"></h:graphicImage></h:commandLink>
                            </h:form>
                        </li>
                        <li>
                            <h:form id="Drap_NL">
                                <h:commandLink id="NL" action="#{bundle.setToNetherlands()}"><h:graphicImage title="English" value="resources/img/NL.jpg"></h:graphicImage></h:commandLink>
                            </h:form>
                        </li>
                       <li>                                             
                           <h:link outcome="Panier.xhtml" id="Basket"><h:graphicImage id="logoPanier" value="resources/img/shopping.png"></h:graphicImage><h:outputLabel value="#{msg.BoutonPanier}"></h:outputLabel><h:outputLabel value="[#{controller_Cart.getNbItem()}]"></h:outputLabel></h:link>
                       </li>
                       <li class="dropdown">
                           <c:choose>
                               <c:when test="${empty login.currentUser}">
                                   <a id="Connexion" class="dropdown-toggle"><i class="icon-user icon-white"></i><h:outputLabel value="#{msg.BoutonLogin}"></h:outputLabel></a>
                               </c:when>
                               <c:otherwise>
                                   <a class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-white"></i><h:outputLabel value="#{login.longName}"><b class="caret"></b></h:outputLabel></a>                               
                                   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

                                       <h:form id="brolLogout">
                                           <li><h:commandLink action="#{login.logoutUser}"><h:outputLabel value="#{msg.BoutonDeco}"></h:outputLabel></h:commandLink></li>
                                       </h:form>

                                   </ul>
                               </c:otherwise>
                           </c:choose>
                       </li>  
                    </ul>
                  </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>    
        <div id="wrap">   
           <div class="container">
                <ui:insert name="content"></ui:insert>
           </div>
           <div id="push"></div>
        </div>
        <div id="footer">
            <div class="container">
                <div id="partieGauche">
                    Yann &amp; Pierre
                </div>
                <div id="partieDroite">
                    © Apppstore 2013
                </div>
            </div>
        </div>
        <div id="PanelConnexion">
            <h1><h:outputText value="#{msg.labelPanel}"></h:outputText></h1>
            <br/>
            <h:form class="form-horizontal">
               <div class="control-group">
                   <div class="control-label" id="alignLabel1">
                       <h:outputText value="#{msg.idLogin}"></h:outputText>
                    </div>
                    <div class="span2">
                        <h:inputText id="login" required="true" requiredMessage="#{msg.MailError}" value="#{login.userLogin}">
                            <f:validator validatorId="emailAddressValidator" />
                        </h:inputText>
                        <h:message for="login" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                    </div>
                    <br/><br/>
                    <div class="control-label" id="alignLabel2">
                        <h:outputText value="#{msg.mdp}"></h:outputText>
                    </div>
                    <div class="span2">
                        <h:inputSecret id="pwd" required="true" requiredMessage="#{msg.PwdError}" value="#{login.userPwd}"></h:inputSecret>
                        <h:message for="pwd" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                    </div>      
                </div>
                <br/>
                <h:link outcome="NewAccount.xhtml" value="#{msg.LienNewAccount}"></h:link>           
                <br/>
                <div class="modal-footer">
                    <h:commandButton type="button" class="btn" onclick="ButtonCancel()" value="#{msg.btnCancel}"></h:commandButton>
                    <h:commandButton action="#{login.loginToAccount}" class="btn btn-primary" value="#{msg.btnConnect}"></h:commandButton>
                </div>
            </h:form>
        </div>
        
        
        
        <div id="addcart" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h1 id="myModalLabel"><h:outputText value="#{msg.LabelPanelAddCart}"></h:outputText></h1>
            </div>
            
            <div class="modal-body">
                <h3 class="priceitem"><h:outputText id="priceitem" ></h:outputText></h3>
                <div class="row">             
                    <div class="span1">                                     
                       <h:graphicImage id="imgadd" value=""></h:graphicImage>
                    </div>
                    <div class="span4">
                        <h4><h:outputText id ="titelitem" value=""></h:outputText></h4>
                        <h:outputText  id="AddCartQuantity" value="#{msg.LabelAmount}"></h:outputText>
                        <h:inputText class="input-mini" id="qteitemfield" required="true"  value="">
                            <f:convertNumber integerOnly="true" />
                            <f:validateLength maximum="5"/>
                        </h:inputText>
                        <h:message for="qteitemfield" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                    </div>
                     
                </div>
                
            </div>
            <div class="modal-footer">
            <h:form id="NewItem" class="form-horizontal">
                 <h:inputHidden id="iditem" required="true"  value="#{controller_Cart.id}"></h:inputHidden>
                 <h:inputHidden class="input-mini" id="qteitem" required="true"  value="#{controller_Cart.qte}"></h:inputHidden>
                 <h:button class="btn" value="#{msg.BtnClose}"></h:button>
                 <h:commandButton action="#{controller_Cart.AddToCart}" type="submit" class="btn btn-primary" id="subOrder" value="#{msg.BtnOrder}"></h:commandButton>
            </h:form>
            </div>
            
       </div>
        
        
    </h:body>
    </f:view>
</html>
